/* Reset
   ========================================================================== */

fieldset,
legend {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Checkboxes
   ========================================================================== */

$checkbox-icon-size: 16px;
$checkbox-check-width: 8px;
$checkbox-check-height: 4px;

%owid-checkbox {
    display: inline-block;
    position: relative;
    padding-left: $checkbox-icon-size;
    padding-left: calc(#{$checkbox-icon-size} + 0.5rem);
    margin-bottom: 0.5rem;

    input[type="checkbox"] {
        position: absolute;
        z-index: $zindex-input;
        top: 50%;
        left: 0;
        margin-top: -6px;
        width: $checkbox-icon-size;
        height: $checkbox-icon-size;
        cursor: pointer;
        margin: 0;
        opacity: 0;
    }

    input[type="checkbox"] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: $checkbox-icon-size;
        height: $checkbox-icon-size;
        margin-top: -$checkbox-icon-size * 0.5;
        background: #fff;
        border-radius: 3px;
        border: 1px solid $gray-30;
    }

    input[type="checkbox"]:focus + label::before,
    input[type="checkbox"]:hover + label::before {
        outline: none;
        border-color: $blue-30;
    }

    input[type="checkbox"]:checked + label::before {
        outline: none;
        background-color: $blue-65;
    }

    input[type="checkbox"]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
        left: ($checkbox-icon-size - $checkbox-check-width) * 0.4;
        width: $checkbox-check-width;
        height: $checkbox-check-height;
        border-width: 0 0 3px 3px;
        border-style: solid;
        border-color: #fff;
        background: transparent;
        transform: rotate(-45deg);
    }

    label {
        padding: 0 0.5rem;
        cursor: pointer;
        display: inline-block;
    }
}

.owid-checkbox {
    display: inline-block;
    margin-right: 0.5rem;

    @extend %owid-checkbox;
}

.newsletter-subscription-form__checkbox {
    display: block;

    @extend %owid-checkbox;

    input[type="checkbox"] + label::before {
        top: 0;
        margin-top: -$checkbox-icon-size * 0.5 + 11px;
    }

    input[type="checkbox"]:checked + label::after {
        top: -1px;
        margin-top: -$checkbox-check-height * 0.5 + 10px;
    }

    label {
        display: block;
    }
}

/* Text fields
   ========================================================================== */

%owid-button-visual {
    font-family: $sans-serif-font-stack;
    font-size: 1.125rem;
    transition: opacity 150ms ease;
    background-color: $oxford-blue;
    font-weight: 700;
    color: white;
    border: none;
    cursor: pointer;

    &:hover {
        opacity: 0.85;
    }
}

%owid-button {
    padding: 0.8rem 1rem;

    @extend %owid-button-visual;
}

.owid-button {
    @extend %owid-button;
}

.owid-button[disabled],
.owid-button.disabled {
    opacity: 0.5;
    cursor: default;
}
